import React, { useState, useEffect, useRef } from 'react'
import { Form, Row, Col, Input, Select, Space, Button } from 'antd'
import style from './Index.module.less'
import Dictionary from '@js/dictionary'

const { Item } = Form
const { Option } = Select
const layout = {
  labelCol: { flex: '140px' }
}

function formatCondition (form) {
  const condition = []
  if (form.name !== undefined && form.name !== '') {
    condition.push({ k: 'name', o: 'like', v: `%${form.name}%` })
  }
  if (form.type) {
    condition.push({ k: 'type', o: '=', v: form.type })
  }
  if (form.legal !== undefined && form.legal !== '') {
    condition.push({ k: 'legal', o: 'like', v: `%${form.legal}%` })
  }
  if (form.contact !== undefined && form.contact !== '') {
    condition.push({ k: 'contact', o: 'like', v: `%${form.contact}%` })
  }
  return condition
}

function Main ({ onChange = () => {} }) {
  const [types, setTypes] = useState([])
  const formRef = useRef(null)
  useEffect(() => {
    const d = new Dictionary()
    d.init('鉴定机构类别')
      .then(() => {
        setTypes(d.getList('鉴定机构类别'))
      })
  }, [])
  return (
    <div>
      <Form name='arbitrator-manage-search' ref={formRef} {...layout} initialValues={{ retire: '', foreign_case_in: '', professional_tag: '全部' }} onFinish={d => onChange(formatCondition(d))} onReset={() => formRef.current.submit()}>
        <Row gutter={24}>
          <Col span={8}>
            <Item label='机构名称' name='name'>
              <Input placeholder='请输入' />
            </Item>
          </Col>
          <Col span={8}>
            <Item label='鉴定机构类别' name='type'>
              <Select placeholder='请选择' allowClear>
                {
                  types.map((li, i) => {
                    return <Option value={li.value} key={i}>{li.value}</Option>
                  })
                }
              </Select>
            </Item>
          </Col>
          <Col span={8}>
            <Item label='负责人/法定代表人' name='legal'>
              <Input placeholder='请输入' />
            </Item>
          </Col>
          <Col span={8}>
            <Item label='联系人' name='contact'>
              <Input placeholder='请输入' />
            </Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Item className={style['right-line']}>
            <Space size='middle'>
              <Button type='primary' ghost htmlType='submit'>搜索</Button>
              <Button htmlType='reset'>重置</Button>
            </Space>
          </Item>
        </Row>
      </Form>
    </div>
  )
}

export default Main
